<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>材料管理</title>
    <!-- 引入其它组件 -->
    <!-- 引入 layui -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/app.css">
</head>

<body>
    <div class="container">
        <div class="tab-toolbar" style="text-align: center;">
            <button class="layui-btn layui-btn-normal" id="btn-add">
                <i class="layui-icon">&#xe654;</i>添加
            </button>
            <button class="layui-btn layui-btn-normal" id="btn-save">
                <i class="layui-icon">&#xe605;</i>保存
            </button>
            <button class="layui-btn layui-btn-normal" id="btn-refresh-price">
                <i class="layui-icon">&#x1002;</i>刷新价格
            </button>
            <span id="save-status" style="margin-left: 15px; color: #666; display: none;">
                <span class="status-indicator status-saved"></span>已保存
            </span>
        </div>
        <div class="table-container">
            <div class="table-wrapper" style="flex-grow: 1;overflow: auto; overflow-x: auto;">
                <table class="layui-table" lay-size="sm" id="table4a">
                </table>
            </div>
        </div>
    </div>
    <script type="text/html" id="table4a-bar" width="100">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script src="/js/config/api.js"></script>
    <script src="/js/http.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/utils.js"></script>

    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.$;
            var bsm_utils = layui.bsm_utils;

            var taxRate = 0.13;
            var designCode = getUrlParam("design_code");
            var designType = parseInt(getUrlParam("design_type"));

            // 全局数据存储（同步方式核心）
            var tableData = [];
            var hasUnsavedChanges = false;
            var originalDataHash = ""; // 用于比较数据是否改变
            var user = localStorage.getItem('user');
            user = JSON.parse(user);
            var orgCode = user.org_code;

            // 表格渲染后调整
            table.on('done(table4a)', function () {
                setTimeout(function () {
                    bsm_utils.notifyParentResize({
                        minWidth: 800,
                        minHeight: 600
                    });
                }, 300);
            });

            // 初始化表格（纯同步方式）
            function initTable() {
                table.render({
                    elem: '#table4a',
                    data: tableData, // 直接使用本地数据
                    cols: [
                        [
                            { type: 'numbers', title: '序号', width: "60", align: 'center', colspan: 1, rowspan: 2 },
                            { field: 'code', title: '材料编码', width: 120, align: 'center', colspan: 1, rowspan: 2, totalRowText: '合计' },
                            { field: 'name', title: '规格', width: 200, colspan: 1, rowspan: 2 },
                            { field: 'unit', title: '单位', align: 'center', width: 72, colspan: 1, rowspan: 2 },
                            { field: 'quantity', title: '数量', width: 72, edit: 'text', colspan: 1, rowspan: 2 },
                            { title: '单价（元）', align: 'center', colspan: 3, rowspan: 1, },
                            { title: '合计（元）', align: 'center', colspan: 3, rowspan: 1, },
                            { field: 'remark', title: '备注', width: 100, edit: 'text', rowspan: 2, colspan: 1 },
                            { fixed: 'right', title: '操作', width: "80", toolbar: '#table4a-bar', rowspan: 2, colspan: 1 },
                        ],
                        [
                            {
                                field: 'price', title: '除税价', width: 80,
                                templet: function (d) { return moneyTemplet(d, 'price'); }
                            },
                            {
                                field: 'tax', title: '增值税', width: 80,
                                templet: function (d) { return moneyTemplet(d, 'tax'); }

                            },
                            {
                                field: 'tax_price', title: '含税价', width: 80,
                                templet: function (d) { return moneyTemplet(d, 'tax_price'); }
                            },
                            {
                                field: 'money', title: '除税金额', width: 100, totalRow: true,
                                templet: function (d) { return moneyTemplet(d, 'money'); }
                            },
                            {
                                field: 'money_tax', title: '增值税', width: 100, totalRow: true,
                                templet: function (d) { return moneyTemplet(d, 'money_tax'); }
                            },
                            {
                                field: 'money_total', title: '含税金额', width: 100, totalRow: '{{= (d.TOTAL_NUMS || 0).toFixed(2) }}',
                                templet: function (d) { return moneyTemplet(d, 'money_total'); }
                            },
                        ],
                    ],
                    totalRow: true,
                    done: function () {
                        bindTableEvents();
                        updateSaveStatus();
                        // 简单直接地格式化合计行
                        // 格式化合计行
                        // formatTableTotalRow('#table4a', 2);
                    }
                });
            }

            // 生成数据哈希用于比较数据变化
            function generateDataHash(data) {
                return JSON.stringify(data.map(item => ({
                    code: item.code,
                    name: item.name,
                    quantity: item.quantity,
                    price: item.price,
                    remark: item.remark
                })));
            }

            // 检查是否有未保存的更改
            window.hasUnsavedChanges = function () {
                return hasUnsavedChanges;
            };

            // 更新保存状态显示
            function updateSaveStatus() {
                var $status = $('#save-status');
                if (hasUnsavedChanges) {
                    $status.show().find('.status-indicator')
                        .removeClass('status-saved')
                        .addClass('status-unsaved')
                        .next('span').text('未保存');
                } else {
                    $status.show().find('.status-indicator')
                        .removeClass('status-unsaved')
                        .addClass('status-saved')
                        .next('span').text('已保存');
                }
            }

            // 标记有未保存的更改
            function markAsUnsaved() {
                var currentHash = generateDataHash(tableData);
                hasUnsavedChanges = (currentHash !== originalDataHash);
                updateSaveStatus();
            }

            // 标记为已保存
            function markAsSaved() {
                originalDataHash = generateDataHash(tableData);
                hasUnsavedChanges = false;
                updateSaveStatus();
            }

            // 金额格式化模板函数
            function moneyTemplet(d, field) {
                if (!d || !d.hasOwnProperty(field)) {
                    return '0.000';
                }

                // 确保是数字类型
                let value = d[field];
                if (typeof value === 'string') {
                    value = parseFloat(value) || 0;
                }

                // 格式化显示
                return value.toFixed(3);
            }

            // 加载初始数据（同步方式）
            function loadData() {
                var loading = layer.load();

                http.get(API_CONFIG.ENDPOINTS.LOAD_MATERIAL, {
                    design_code: designCode,
                    design_type: designType
                }).then(function (res) {
                    layer.close(loading);

                    if (res.code === 0 && res.data) {
                        // 处理并保存到全局数据
                        tableData = res.data.map(function (item) {
                            return processItem(item);
                        });

                        // 重新渲染表格
                        table.reloadData('table4a', {
                            data: tableData
                        });

                        markAsSaved(); // 初始加载后标记为已保存
                    } else {
                        tableData = [];
                        // layer.msg(res.msg || '无数据', { icon: 1 });
                        markAsSaved();
                    }
                }).catch(function (err) {
                    layer.close(loading);
                    layer.msg('加载失败', { icon: 2 });
                    tableData = [];
                    markAsSaved();
                });
            }

            function processItem(item) {
                // 使用更精确的计算方式
                item.price = Math.round(parseFloat(item.price || 0) * 1000000) / 1000000;
                item.quantity = Math.round(parseFloat(item.quantity || 0) * 1000000) / 1000000;
                item.tax = Math.round(item.price * taxRate * 1000000) / 1000000;
                item.tax_price = Math.round(item.price * (1 + taxRate) * 1000000) / 1000000;
                item.money = Math.round(item.quantity * item.price * 1000000) / 1000000;
                item.money_tax = Math.round(item.money * taxRate * 1000000) / 1000000;
                item.money_total = Math.round((item.money + item.money_tax) * 1000000) / 1000000;

                if (!item._id) {
                    item._id = (item.code || '') + '_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                }
                return item;
            }

            // 添加材料处理
            window.handleMaterialSelect = function (data) {
                var newItem = processItem(data);
                console.log(newItem.code + newItem.mat_code);

                tableData.push(newItem);

                table.reloadData('table4a', {
                    data: tableData
                });

                markAsUnsaved(); // 标记有未保存的更改
                layer.msg('已添加: ' + data.name, { icon: 1 });
            };

            // 绑定表格事件
            function bindTableEvents() {
                table.on('tool(table4a)', function (obj) {
                    var data = obj.data;

                    if (obj.event === 'delete') {
                        layer.confirm('确定删除？', function (index) {
                            // 从全局数据中移除
                            tableData = tableData.filter(function (item) {
                                return item._id !== data._id;
                            });

                            table.reloadData('table4a', {
                                data: tableData
                            });

                            markAsUnsaved(); // 标记有未保存的更改
                            layer.close(index);
                        });
                    }
                });

                // 监听单元格编辑
                table.on('edit(table4a)', function (obj) {
                    var field = obj.field;
                    var value = obj.value;
                    var data = obj.data;

                    // 更新全局数据
                    var item = tableData.find(i => i._id === data._id);
                    if (item) {
                        item[field] = field === 'quantity' ? Number(value) : value;
                        item = processItem(item); // 重新计算

                        table.reloadData('table4a', {
                            data: tableData
                        });

                        markAsUnsaved(); // 标记有未保存的更改
                    }
                });
            }

            // 保存数据函数（暴露给父窗口）
            window.saveData = function (callback) {
                var invalid = tableData.some(function (item) {
                    return isNaN(item.quantity) || item.quantity <= 0;
                });

                if (invalid) {
                    layer.msg('请输入有效数量', { icon: 2 });
                    if (typeof callback === 'function') callback(false);
                    return;
                }

                var loading = layer.load();
                var saveData = tableData.map(function (item) {
                    return {
                        design_code: designCode,
                        design_type: designType,
                        code: item.code,
                        name: item.name,
                        quantity: item.quantity,
                        price: item.price,
                        remark: item.remark,
                    }
                });

                http.post(API_CONFIG.ENDPOINTS.SAVE_MATERIAL, {
                    design_code: designCode,
                    design_type: designType,
                    material_table: saveData,
                    refresh_price: true,
                }).then(function (res) {
                    layer.close(loading);
                    if (res.code === 0) {
                        layer.msg('保存成功', { icon: 1 });
                        markAsSaved(); // 标记为已保存

                        // 刷新父页面项目摘要数据
                        if (parent && parent.updateProjectData) {
                            parent.updateProjectData(designCode, designType);
                        }

                        if (typeof callback === 'function') callback(true);
                    } else {
                        layer.msg(res.msg || '保存失败', { icon: 2 });
                        if (typeof callback === 'function') callback(false);
                    }
                }).catch(function (err) {
                    layer.close(loading);
                    layer.msg('保存失败: ' + err.message, { icon: 2 });
                    if (typeof callback === 'function') callback(false);
                });
            };

            // 保存按钮点击事件
            $('#btn-save').click(function () {
                window.saveData(function (success) {
                    if (success) {
                        // 保存成功后的额外操作
                    }
                });
            });

            // 添加按钮
            $('#btn-add').click(function () {
                var openurl = '/common/norm_material.html';
                bsm_utils.bsm_popup('双击选择材料条目', openurl, 2, 800, window.screen.height * 0.6);
            });

            // 刷新价格按钮事件
            $('#btn-refresh-price').click(function () {
                refreshMaterialPrices().then(function (updateCount) {
                    if (updateCount > 0) {
                        // 重新渲染表格
                        table.reload('table4a', {
                            data: tableData,
                            done: function () {
                                bindTableEvents();
                            }
                        });
                        markAsUnsaved();
                        layer.msg('成功更新 ' + updateCount + ' 条材料价格', { icon: 1 });
                    } else if (updateCount === 0) {
                        layer.msg('没有材料价格需要更新', { icon: 1 });
                    }
                }).catch(function (error) {
                    layer.msg('刷新价格失败: ' + error, { icon: 2 });
                });
            });

            // 刷新材料表中所有材料价格
            function refreshMaterialPrices() {
                return new Promise(function (resolve, reject) {
                    if (tableData.length === 0) {
                        resolve(0);
                        return;
                    }

                    var loading = layer.load();
                    var materialCodes = tableData.map(function (item) {
                        return item.code;
                    });

                    http.post(API_CONFIG.ENDPOINTS.GET_MATERIAL_PRICE, {
                        design_type: parseInt(designType),
                        org_code: orgCode,
                        material_codes: materialCodes
                    }).then(function (res) {
                        layer.close(loading);

                        if (res.code === 0 && res.data) {
                            var updatedCount = 0;
                            var priceMap = {};

                            res.data.forEach(function (item) {
                                var newPrice = parseFloat(item.price) || 0;
                                if (newPrice !== 0) {
                                    priceMap[item.material_code] = newPrice;
                                }
                            });

                            // 更新全局数据
                            tableData.forEach(function (item) {
                                if (priceMap[item.code] !== undefined && priceMap[item.code] !== item.price) {
                                    item.price = priceMap[item.code];
                                    processItem(item); // 重新计算
                                    updatedCount++;
                                }
                            });

                            resolve(updatedCount);
                        } else {
                            reject(res.msg || '刷新价格失败');
                        }
                    }).catch(function (err) {
                        layer.close(loading);
                        reject('服务器错误: ' + err.message);
                    });
                });
            }

            // 工具函数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                return r ? decodeURIComponent(r[2]) : null;
            }

            // 初始化执行
            initTable();
            loadData();

            // 添加页面离开前的提示
            window.addEventListener('beforeunload', function (e) {
                if (hasUnsavedChanges) {
                    var confirmationMessage = '您有未保存的更改，确定要离开吗？';
                    e.returnValue = confirmationMessage;
                    return confirmationMessage;
                }
            });
        });
    </script>
</body>

</html>